import React from 'react';

import CKModal from '../components/CKModal';
import CKTable from '../components/CKTable';
import CKPages from '../components/CKPages';
import AMUIReact, {
    Button,
    Input
} from 'amazeui-react';
import Fetch from '../common/Fetch';

class Template extends React.Component {
    constructor(props) {
        super(props);

        this.state = {
            data: [],
            page: {
                pageSize: 20,
                currentPage: 1,
                totalNum: 43
            },
            dataCount: 1,
            pageNum: 10,
            keyword:''
        };
    }
    componentDidMount() {
        this.loadTemplate(1);
    }
    changeHandler(field) {
        return (e)=> {
            if(field == 'keyword'){
                this.setState({
                    keyword:e.target.value
                });
            }
        }
    }


    loadTemplate(page) {
        console.log(page)
        Fetch('/cms/template_manage/query', {query: [{name:'tmp_name',value:this.state.keyword,type:'LIKE'}], page: page, num: this.state.pageNum}, (res)=> {
            if (res.status) {
                this.setState({
                    data: res.data.data,
                    currentPage: page,
                    dataCount: res.data.count
                });
            } else {
            }
        }, (e)=> {
            // console.log(e);
        });
    }

    clickHandler = (row) => {
        this.props.callback(row);
    };

    render() {
        return (
            <div>
                <div>
                    <p>
                        <Input placeholder="请输入模板名称"  labelClassName="am-u-sm-3" wrapperClassName="am-u-sm-4 am-u-end" onChange={this.changeHandler('keyword')} />
                        <Button onClick={()=> {this.loadTemplate(1)}}  labelClassName="am-u-sm-2" wrapperClassName="am-u-sm-4 am-u-end" amStyle="success" radius>查询</Button>
                    </p>
                      <p>
                          <CKTable ref="table" data={this.state.data} select={false} >
                              <CKTable.Header text="ID" field="tmp_id"/>
                              <CKTable.Header text="模板名称" field="tmp_name"/>
                              <CKTable.Header text="模板路径" field="tmp_path"/>
                              <CKTable.Header text="发布目录" field="tmp_publish_path"/>
                              <CKTable.Header text="操作">
                                  <Button onClick={this.clickHandler} amSize="xs" amStyle="primary" radius>选择</Button>
                              </CKTable.Header>
                          </CKTable>
                          <CKPages current={this.state.currentPage}
                                   number={this.state.pageNum}
                                   count={this.state.dataCount}
                                   onSelect={(page)=> {this.loadTemplate(page)}}/>
                      </p>
                </div>
                <CKModal ref="modal"/>
            </div>
        );
    }
}

export default Template;